<template lang="pug">
div
  FixedScroll(:minusBottomHeight="minusBottomHeight")
    PageHeader(slot="fixed" pageTitle="解封")

    div.scroll(slot="scroll")
      KSlotPair(k="实体仓库")
        DropDownList.dropdown-list(
            :list="real.list"
            :curValue="real.curValue"
            @select="selectReal"
            :style="{zIndex: '10'}"
            )
      KSlotPair(k="逻辑仓库")
        div {{ info.SWmNo }}
      KSlotPair(k="存储区")
        div {{ info.BillNo }}
      KSlotPair(k="库位")
        input.input(placeholder="库位号")
        Scan.scan(@scan="search")

      KSlotPair(k="物料号")
        div {{ info.SWmNo }}
      KSlotPair(k="物料名称")
        div {{ info.SWmNo }}
      KSlotPair(k="供应商号")
        div {{ info.SWmNo }}
      KSlotPair(k="供应商名称")
        div {{ info.SWmNo }}

      KSlotPair(k="零件类型")
        DropDownList.dropdown-list(
            :list="part.list"
            :curValue="part.curValue"
            @select="selectPart"
            :style="{zIndex: '9'}"
            )
      KSlotPair(k="批次")
        input.input(placeholder="批次号")
      KSlotPair(k="可用件数")
        div {{ info.SWmNo }}
      KSlotPair(k="需解封件数")
        input.input

      g-h.bottom-button(j-c="space-around")
        Button(@click.native="search" text="查询")
        Button(@click.native="pack" text="解封")

</template>

<script>
import api from "$api"
import util from "$util"

export default {
  props: {
    forceUpdate: {
      type: Boolean,
      default: false,
    },
    minusBottomHeight: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isLoading: false,

      info: {
        SWmNo: "仓库一",
        BillNo: "存储区一",
      },

      real:{
        curValue: "",
        list: [
          { name: "start", id: "a" },
          { name: "1aouaoeuaoeuaoeuaoeuaoeuaoeuaoeuaouaoueaouaou", id: "b" },
          { name: "2", id: "c" },
          { name: "3", id: "a" },
          { name: "4", id: "a" },
          { name: "5", id: "a" },
          { name: "6", id: "a" },
          { name: "7", id: "a" },
          { name: "8", id: "a" },
          { name: "9", id: "a" },
          { name: "c", id: "c" },
          { name: "c", id: "c" },
          { name: "c", id: "c" },
          { name: "c", id: "c" },
          { name: "b", id: "b" },
          { name: "b", id: "b" },
          { name: "b", id: "b" },
          { name: "b", id: "b" },
          { name: "end", id: "c" },
        ],
      },
      part:{
        curValue: "",
        list: [
          { name: "a", id: "a" },
          { name: "b", id: "b" },
          { name: "c", id: "c" },
        ],
      },
    }
  },
  watch: {
    forceUpdate(v) {
      if (v) {
        this.$forceUpdate()
      }
    }
  },
  methods: {
    async search(value) {
    },
    async save(value) {
    },
    async pack(value) {
    },

    async selectReal(v) {
      this.real.curValue = v.value
    },
    async selectPart(v) {
      this.part.curValue = v.value
    },
  },
}
</script>

<style lang="stylus" scoped>

.c-root
  padding-bottom: 3rem

.dropdown-list
  width: 100%

.input
  width: 100%
  padding-left: 0.5rem

.bottom-button
  margin-top: 1rem

.scroll
  height: 100%
  overflow: scroll
  &::-webkit-scrollbar
    display: none

</style>
